<template>
  <Page>
    <ARow :gutter="[0, 16]">
      <ACol :span="24">
        <ASpace>
          <ADatePicker v-model:value="date" format="YYYY-MM" default-value="2022-08-18" />
          <span>{{ date?.format('YYYY-MM-DD') }}</span>
        </ASpace>
      </ACol>
      <ACol :span="24">
        <ASpace>
          <!-- v-model:value="dateFormat" -->
          <!-- default-picker-value="2022-08-18" -->
          <!-- default-value="2020-08-18" -->
          <ADatePicker
            format="YYYY"
            value-format="YYYY-MM"
            default-picker-value="2022-08-18"
            @change="
              (...params: any[]) => {
                console.log(params)
              }
            "
          />
          <span>{{ dateFormat }}</span>
        </ASpace>
      </ACol>
      <ACol :span="24">
        <ASpace>
          <ExDatePicker v-model:value="date" format="YYYY" value-format="YYYY-MM" />
        </ASpace>
      </ACol>
    </ARow>
  </Page>
</template>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'

const date = ref<Dayjs>(dayjs('2023-02-22'))
const dateFormat = ref('2023-02-24')
</script>

<style scoped></style>
